<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WebGL monkey</title>
<style type="text/css">
<!--
body {background-color:black; color:white}
canvas {float:left;}
-->
</style>
<script id="vertex-shader" type="x-shader/x-vertex">
  attribute vec3 a_position;
  attribute vec3 a_normal;

  uniform mat4 u_proj;

  varying mediump vec3 v_position;
  varying mediump vec3 v_normal;

  void main() {
    vec4 pos = u_proj * vec4(a_position,1);
    vec4 norm = u_proj * vec4(a_normal,1);
    v_position = pos.xyz;
    v_normal = norm.xyz;
    gl_Position = pos;
  }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
  precision mediump float;
  varying vec3 v_position;
  varying vec3 v_normal;

  uniform vec3 u_lightPos;
  uniform vec3 u_ambientLight;

  void main() {
    vec3 lightDirection = normalize(u_lightPos - v_position);
    float lighting = max(dot(normalize(v_normal), lightDirection), 0.);
    vec3 col = vec3(1,1,1);
    gl_FragColor = vec4( col * lighting + u_ambientLight, 1);
  }
</script>
  <script type="text/javascript" src="webgldemo.bc.wasm.js" defer></script>
  </head>
  <body>
    <canvas id="canvas" height="400" width="400"></canvas>
    <div><span id="fps"></span> frames per second</div>
  </body>
</html>
